<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>科研信息交流管理系统后台-登陆</title>
		<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
		
		<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
		<style>
			body {
			            background-color: #f6f8fa; /* GitHub背景色 */
			            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
			            min-height: 100vh;
			            display: flex;
			            align-items: center;
			            padding: 20px 0;
			        }
			#zti{
				width:100%;
				max-width: 960px;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 6px; 
				overflow: hidden;
				box-shadow: 0 1px 3px rgba(0,0,0,0.13);
			}
			#zhuojm{
				flex: 1;
				background-color: #24292e; 
				 color: #fafbfc; 
				 padding: 60px 40px;
			}
			#youjm{
				flex: 1;
				padding: 60px 40px;
				text-align: left;
			}
			login{
				width: 100%;
				background-color: #2ea44f; 
				 color: #fff;
				 border-radius: 6px;
				 border: none;
				padding: 10px 16px;
				font-weight: 500;
				transition: background-color 0.2s;
			}
			login:hover {
				background-color: #238636; 
			}
			body{
				background-image: url("img/bjtup.jpg");
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				background-attachment: fixed;
			}
			h2 {
				color: #24292e; /* GitHub标题深色 */
				font-weight: 600;
			}
			p {
				color: #586069; /* GitHub次要文本色 */
			}
			.form-control {
				border: 1px solid #d1d5da;
				border-radius: 6px;
				transition: border-color 0.2s, box-shadow 0.2s;
			}
			.form-control:focus {
				border-color: #2188ff;
				box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
				outline: none;
			}
			#zhuojm p {
				color: #c9d1d9; /* 深色背景上的文本色 */
			}
			#zhuojm h3 {
				color: #fafbfc;
				margin-top: 24px;
				margin-bottom: 8px;
			}
			
		</style>
		<script>
			function dluyz(){
				uname=document.getElementById("zhanghao").value;
			unameReg=/^[0-9]{6,30}$/
			flag = true;
			if (!unameReg.test(uname)) {
			    document.getElementById("zhts").innerText="账号不正确！";
			    flag = false;
			} else {
				document.getElementById("zhts").innerText="";
			}
				upsw=document.getElementById("mm").value;
				upswReg=/^[a-zA-Z0-9]{6,30}$/
				if (!upswReg.test(upsw)) {
				    document.getElementById("mmts").innerText="必须是6-30个字符，字母和数字组合！"
				    flag = false;
				} else {
					document.getElementById("mmts").innerText="";
				}
				return flag;
			}
		</script>
	</head>
	<body>
		<div id="zti" class="d-flex">
			<div id="zhuojm" class="container">
				<h1 >科研信息交流平台后台系统</h1>
				<h2>高效管理科研论文，信息</h2>
				<h2>改变科研交流方式</h2>
				<p>一站式协会管理解决方案，助力校园社团数字化管理，简化流程，提高效率，增强成员互动。</p>
				<h3>项目，论文全周期管理</h3>
				<p>从开题到结题，完整记录项目的逐步完善</p>
				<h3>活动高效组织</h3>
				<p>简化活动申请审批流程，提升活动组织效率</p>
				<h3>数据驱动决策</h3>
				<p>通过数据分析，优化科研信息交流，促进持续发展</p>
			</div>
			<div id="youjm" >
				<h2>欢迎回来</h2>
				<p>请登录您的账号以继续使用系统</p>
				<div class="container">
					<form onsubmit="return dluyz()" action="index.html">
						账号<input type="text" class="form-control" id="zhanghao" placeholder="请输入学号/工号"/>
						<span id="zhts" style="color: #cb2431;"></span> <!-- GitHub红色错误提示 -->
						<br>
						密码<input type="password" class="form-control" id="mm" placeholder="请输入密码"/>
						<span id="mmts" style="color: #cb2431;"></span> <!-- GitHub红色错误提示 -->
						<br>验证码
						<div style="display: flex; align-items: center; gap: 10px; margin: 10px 0;">
							
							<input type="text" class="form-control" placeholder="请输入验证码" style="width: 180px; padding: 6px 12px;"/>
							<img src="images/captcha.jpg" alt="验证码图片" style="height: 38px; cursor: pointer; border: 1px solid #d1d5da; border-radius: 6px;" title="点击刷新验证码"/>
						</div>
						<br>
						<input type="checkbox"/>记住账号&nbsp;
						<input type="checkbox"/>记住密码
						<br>
						<br>

						  <!-- 表单内容 -->
						  <button type="submit" id="login" >登录系统</button>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>